<!--&lt;!&ndash;<script type="text/javascript" src="front/js/common-min.js"></script>&ndash;&gt;-->
{layout name="vote/header" /}
<div class="wrapper j_vote" id="app">
    <div class="banner">
        <!--banner图-->

        <img src="{$vote.head_img}" />

        <!--投票时间投票规则-->
        <div class="date-rules">
            <span class="date">{$vote.vote_btn_name}时间：{$vote.start_time}—{$vote.end_time}</span>
            <span class="rules-btn" id="j-call-rules">活动规则</span>
        </div>
    </div>



    <!-- 主区域-->
    <div class="content" >
        <!--tab & search-->
<!--        <div class="search-area clear">-->
<!--            &lt;!&ndash; 搜索区&ndash;&gt;-->
<!--            <div class="search">-->
<!--                <input class="search-input j_search_input" placeholder="{$vote.search_words}" v-model="keyword"/>-->
<!--                <span class="search-btn j_search" @click="search()">搜索</span>-->

<!--            </div>-->


<!--        </div>-->
        <!-- 前置页 主题区 -->
        <div class="pre-content  main-content j_acitvity clear">

            <div class="subject–item" v-for="i in type">
                <a class="img-area" @click="toList(i.id)">

                    <img class="data-img" :src="i.head_img" />

                </a>
                <p class="txt-area" v-cloak>
                    {{i.name}}
                </p>
            </div>

            <div class="item" v-for="i in list" v-cloak>
                <!--<span class="item-order">Top1</span>-->
                <div class="bg-gray">
                    <a @click="toInfo(i.id)">
                        <div class="img-area">
                            <img :src="i.head_img">
                        </div>
                    </a>
                    <i class="iplay"></i>
                    <div class="txt-area clear">
                        <p class="name">
                            <a>{{i.name}}</a>
                        </p>
                        <p class="info">编号:{{i.mid}}</p>
                    </div>
                </div>

                <p class="ticket">票数:<span class="now-ticket j_now">{{i.total}}</span></p>

                <div class="vote-btn j_vote_btn" @click="vote(i.id,i)">
                    {$vote.vote_btn_name}
                </div>
            </div>
        </div>
    </div>
    {include file="vote/extend"}

</div>


<!-- 微信分享接口信息 S -->
<!--<div class="wxshare" style="display:none;">-->
<!---->
    <!--<div id="shareTit">选出你最喜欢的藏歌，让“天籁之音”唱给你听！</div>-->
    <!--<div id="shareSum">四川观察·视频新闻第一屏</div>-->
    <!--<div id="shareImg"><img src="http://scgc.sctv.com/H5/zgh/201808/W020180830353029024905.jpg" /></div>-->
<!---->
<!--</div>-->
<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<!--<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>-->
<!--<script type="text/javascript" src="http://www.sctv.com/global/js/share.js"></script>-->
<script type="text/javascript">
    // getInfo();
</script>
<!-- 微信分享接口信息 E -->
<script>
    var type = {$type};
    var sms = {
        time:0,//倒计时
        phone:"",
        code:"",
        content:"获取验证码",
    };
    new Vue({
        el:"#app",
        data:{
            type:type,
            vote_id:"{$vote.id}",
            list:[],
            keyword:'',
            limit:30,
            showMore:false,
            enablePage:true,
            is_login:"{$is_login}",
            userAgent : "{$app.app_ua}",
            enableCheck : "{$vote.enable_web}",
            sms:sms,
        },
        computed:{
            enable_logout:function () {
                var ua = navigator.userAgent;
                if( ua.indexOf(this.userAgent)<0 && (this.is_login == 1)){
                    return 1;
                }
                return 0;
            }
        },
        created:function () {
            this.$nextTick(function () {
                this.dealImgStyle();
            })
        },
        methods:{
            toList:function (type_id) {
                console.log(type_id)
                window.location.href="{:url('classify', ['site' => $site_id])}"+"/type_id/"+type_id
            },
            search:function () {
                console.log('search');
                this.getList('',this.keyword)
            },
            //投票
            vote:function (item_id,i) {
                var ua = navigator.userAgent;

                if(!this.checkIsApp()){
                    return ;
                }
                var _this =this;
                $.post("{:url('vote', ['site' => $site_id])}",{vote_id:this.vote_id,item_id:item_id},function (res) {
                    console.log(res);
                    if(res.code){
                        if(res.code == 500){
                            if(ua.indexOf(_this.userAgent)>-1){
                                //app内
                                $('#j-login').trigger('click');
                            }else {
                                //web端未登录
                                $("#j-to-login").removeClass("hide");
                            }
                            return false;
                        }

                    }else {
                        i.total += res.data.add
                    }
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                },'json')

            },
            //跳转到详情页
            toInfo:function(item_id){
                window.location.href="{:url('detail', ['site' => $site_id])}"+"/item_id/"+item_id
            },
            //获取数据
            getList:function (order = '',keyword = '') {
                var _this = this;
                $.post("{:url('getList', ['site' => $site_id])}",{vote_id:_this.vote_id,order:order,keyword:keyword},function (res) {
                    _this.type = [];
                    _this.list = res.data.list
                    // if(!_this.enablePage){
                    //     _this.list = _this.all
                    // }else {
                    //     //分页
                    //     _this.list = _this.all.splice(0,_this.limit)
                    //     if(_this.all.length > 0){
                    //         _this.showMore = true
                    //     }else {
                    //         _this.showMore = false
                    //     }
                    // }
                    _this.$nextTick(function () {
                        _this.dealImgStyle(true);
                    })
                },'json')
            },
            checkIsApp:function () {
                return checkApp(this.userAgent,this.enableCheck)
            },
            dealImgStyle:function(){
                var img = $('.data-img');
                if(img.length>0){
                    img[0].onload = function () {
                        setTimeout(function() {
                            var height = img[0].height;
                            var width = img[0].width;
                            //               alert(height);
                            //              alert(width);
                            console.log(height);
                            console.log(width);
                            img.css({width: width, height: height})
                        },0)
                    }
                }
            },
            send_code:function () {
                var _this = this;
                if(_this.sms.time>0){
                    return false;
                }
                if(!_this.checkPhone())
                    return false;

                $.post("/index/vote/send_code",{phone:_this.sms.phone},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code){
                        _this.sms.time = 60;
                        var inter = setInterval(function () {
                            console.log(_this.sms.time)
                            if(_this.sms.time>0){
                                _this.sms.content = "已发送("+_this.sms.time+")";
                            }else {
                                _this.sms.content = "发送验证码";
                                clearInterval(inter);
                            }
                            _this.sms.time--;
                        },1000)
                    }
                },'json')
            },
            web_login:function () {
                var _this = this;
                if(!_this.checkPhone()){
                    return false;
                }
                if(_this.sms.code==""){
                    layer.open({
                        content: "验证码不能未空"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }
                $.post("{:url('web_login', ['site' => $site_id])}",{phone:_this.sms.phone,code:_this.sms.code},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2
                    })
                    if(res.code){
                        setTimeout(function () {
                            // window.location.reload();
                            window.location.href = location.href+'?time='+((new Date()).getTime());
                        },1500)
                    }

                },"json")
            },
            checkPhone:function () {
                var reg = /^\d{11}$/;
                if(this.sms.phone == ''){
                    layer.open({
                        content: "请输入手机号码"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }

                if(!reg.test(this.sms.phone)){
                    layer.open({
                        content: "手机号码格式错误"
                        ,skin: 'msg'
                        ,time: 2
                    })
                    return false;
                }
                return true;
            },
            logout:function () {
                layer.open({
                    content: '确定要退出吗？'
                    ,btn: ['退出', '取消']
                    ,yes: function(index){
                        $.get("{:url('web_logout', ['site' => $site_id])}",function (res) {
                            layer.open({
                                content: res.msg
                                ,skin: 'msg'
                                ,time: 2
                            })
                            if(res.code){
                                setTimeout(function () {
                                    // window.location.reload();
                                    window.location.href = location.href+'?time='+((new Date()).getTime());

                                },1500)
                            }
                        },'json')
                        layer.close(index);
                    }
                });

            },
        }
    })
</script>
